<template>
    <div class="app-container">
        <el-form :inline="true" ref="queryRef" label-position="right" :model="params" label-width="200px">
            <div class="form-inline">
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="地震名称：" class="form-item" prop="seismName">
                            <el-input v-model="params.seismName" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="重工程类别：" class="form-item" prop="projectType">
                            <el-select v-model="params.projectType" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in projectTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="维护人：" class="form-item" prop="createUserName">
                            <el-input v-model="params.createUserName" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="发震时间:">
                            <el-col :span="11">
                                <el-form-item prop="startTime">
                                    <el-date-picker clearable v-model="params.startTime" type="datetime" placeholder="开始时间"
                                        value-format="YYYY-MM-DD HH:mm:ss"  :disabled-date="startDisableDate" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="endTime">
                                    <el-date-picker clearable v-model="params.endTime" type="datetime" placeholder="结束时间"
                                    value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="endDisableDate" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="年代：" class="form-item" prop="year">
                            <el-select v-model="params.year" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设防情况：" class="form-item" prop="fortification">
                            <el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in fortificationOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="center">
                    <el-col :span="11">
                        <el-form-item label="震级：" class="form-item" prop="magnitude">
                            <el-input v-model="params.magnitude" placeholder="" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11"></el-col>
                </el-row>
                <el-row justify="end">
                    <el-form-item class="bottom-button">
                        <el-button type="primary" @click="onModify">修改</el-button>
                        <el-button type="primary" @click="onDelete">删除</el-button>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onRest">重置</el-button>
                    </el-form-item>
                </el-row>
            </div>
        </el-form>
        <div class="table-wrapper">
            <el-table class="listTable" ref="multipleTableRef" border :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange" :cell-style="{ border: '1px solid #e5ebf7' }"
                :header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">

                <el-table-column type="selection" width="55" label="序号" />
                <el-table-column prop="code" header-align="center" align="center" label="编号">
                    <template #default="scope">
                        <el-button link type="text" size="small" @click.prevent="viewProject(scope.row)">
                            {{ scope.row.code }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="versionCode" header-align="center" align="center" label="所用数据版本号" />
                <el-table-column prop="seismName" header-align="center" align="center" label="地震名称" />
                <el-table-column prop="projectType" header-align="center" align="center" label="重大工程类别" />
                <el-table-column prop="seismTime" header-align="center" align="center" label="发震时间" />
                <el-table-column prop="magnitude" header-align="center" align="center" label="震级" />
                <el-table-column prop="fortification" header-align="center" align="center" label="设防情况" />
                <el-table-column prop="year" header-align="center" align="center" label="年代">
                    <template #default="scope">
                        <span v-if="scope.row.year==1">1978年以前</span>
                        <span v-if="scope.row.year==2">1978-1989年</span>
                        <span v-if="scope.row.year==3">1989-2001年</span>
                        <span v-if="scope.row.year==4">2001年以后</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createUserName" header-align="center" align="center" label="维护人" />
            </el-table>
            <div class="paging">
                <el-pagination background v-model:current-page="queryPagination.pageNo" :layout="layout"
                    :page-size="queryPagination.pageSize" :total="queryPagination.total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
// 引入接口
import {
    queryHeDamage,
    deleteHeDamageByNumber
} from "@/api/majorEnginVulnerAnalysis/majorEnginVulnerAnalysis.js";
// 引入store
import useDictStore from '@/store/modules/dict';
// 获取pinia
const dictStore = useDictStore();

// 获取当前实例
const { proxy } = getCurrentInstance()
// 全局路由对象
const router = useRouter();

const data = reactive({
    // 表单参数
    params: {
        seismName: "",//地震名称
        projectType: "",//重大工程类别
        createUserName: "", //维护人
        startDate: "", //维护开始日期
        endDate: "",//维护结束日期
        startTime: "", //维护开始时间
        endTime: "",//维护结束时间
        fortification: "", //设防情况
        year: "",//年代
        magnitude: "",//震级
    },
    // 设防情况
    fortificationOptions: dictStore.fortificationOptions || [],
    // 年份
    yearsOptions: dictStore.yearsOptions1 || [],
    // 重大工程类别
    projectTypeOptions: dictStore.heavyCategoryOptions || [],
    //表格
    tableData: [],
    //分页
    layout: " prev, pager, next, jumper, sizes, total",
    queryPagination: {
        pageNo: 1,
        pageSize: 10,
        total: 100,
    },
})
const {
    params,
    fortificationOptions,
    yearsOptions,
    projectTypeOptions,
    tableData,
    queryPagination,
    layout
} = toRefs(data);

// 设定时间可选区间
const startDisableDate = (time) => {
    let endDateVal = params.value.endTime?params.value.endTime.split(' ')[0]:undefined
    if (endDateVal) {
        return time.getTime() > new Date(endDateVal).getTime()
    }
}
const endDisableDate = (time) => {
    let beginDateVal =params.value.startTime?params.value.startTime.split(' ')[0]:undefined
    if (beginDateVal) {
        return time.getTime() < new Date(beginDateVal).getTime()
    }
}

//表格
const multipleTableRef = ref();
// 表格多选列表
const multipleSelection = ref();
// 表格选择事件
const handleSelectionChange = (val) => {
    multipleSelection.value = val;
};

//分页
const handleSizeChange = (val) => {
    // 改变每页显示的条数 
    queryPagination.value.pageSize = val
    // 注意：在改变每页显示的条数时，要将页码显示到第一页
    queryPagination.value.pageNo = 1
    onSearch()
};
const handleCurrentChange = (val) => {
    onSearch()
};

//重大工程历史震害数据
const onSearch = () => {
    queryHeDamage({
        ...params.value,
        page: queryPagination.value.pageNo,
        rows: queryPagination.value.pageSize
    }).then((res) => {
        tableData.value = [];
        if (res.code === 200 && res.data) {
            queryPagination.value.total = res.data.total
            const rows = res.data.rows;
            //循环遍历之前加上非空判断
            if (rows.length) {
                tableData.value = [...rows];
            }
        }
    }).catch(err => {
        console.log(err);
    });
};

// 删除行
const onDelete = () => {
    const ids = []
    if (!multipleSelection.value || multipleSelection.value.length <= 0) {
        proxy.$modal.msgWarning("请选中数据");
        return false;
    }
    // 获取ids
    multipleSelection.value.forEach(item => {
        ids.push(item.id)
    })
    deleteHeDamageByNumber({
        ids: ids.join(",")
    }).then((res) => {
        if (res.code === 200) {
            proxy.$modal.msgSuccess('删除成功!');
            // 更新列表
            onSearch();
        }
    }).catch(err => {
        proxy.$modal.msgError('删除失败!');
    })
}
//修改
const onModify = () => {
    if(multipleSelection.value) {
        if (multipleSelection.value.length == 1) {
            const row = multipleSelection.value[0];
            router.push({
                path: '/majorEnginVulnerAnalysis/majorProjectData/import',
                query: {
                    id: row.id,
                    isEdit:true
                }
            })
        } else if (multipleSelection.value.length > 1) {
            proxy.$modal.msgWarning("请选择一行数据进行修改！");
        } else {
            proxy.$modal.msgWarning("请选中数据！");
        }
    }
}
// 点击编号跳转
const viewProject = (row) => {
    router.push({
        path: '/majorEnginVulnerAnalysis/majorProjectData/import', query: {
            id: row.id,
        }
    })
}

//重置
const onRest = () => {
    proxy.resetForm("queryRef")
    onSearch();
};

// 挂载
onMounted(() => {
    onSearch()
});
</script>

<style lang="scss" scoped>
.paging {
    padding: 20px 0;
}

.form-inline {
    .el-form-item {
        margin-right: 0px;
    }
}
</style>
